<html>
	<head>
		<title>Home</title>
		<style type="text/css">
			body {font-family: Arial; margin:0 auto; padding:0; width:1000px;}
			a {text-decoration: none}
			a:hover {text-decoration: underline;}
			#header {padding: 10px; height: 60px; background: #ccf; }
			#topbar {padding:0; overflow:auto; border-bottom: 1px solid #333;  }
			#topbar ul {padding:0; margin: 0;}
			#topbar li { display:inline-block; padding:3px 10px; border-right: 1px solid #333;}
			#topbar #addHill {float:right; margin-right:10px;}
			#report {margin: 10px 0; padding: 10px 0; overflow: auto; border-bottom: 1px solid #333;}
			#report_details {float: left; }
			.report_detail {font-weight: bold;}
			#report_action {float: right;}
			#report_action a {display:block; padding:5px; border:1px solid #888; margin: 20px; text-align: center;}
			#comments {margin: 0 0 20px 0;}
			.comment {list-style-type: none; border-bottom: 1px dotted #333; padding:3px;}
		</style>
	</head>
	<body>
		<div id="header"><strong>Hills</strong></div>
		<div id="topbar">
			<a id="addHill" href="/sky/add">+</a>
			<ul>
				{% for hill in hills %}
					<li><a href="/sky?name={{hill.name}}">{{hill.name}}</a></li>
				{% endfor %}
			</ul>			
		</div>
		<div id="content">
			<div id="report">
				<div id="report_details">
					<strong>HillName : {{hill.name}}</strong><br/><br/>
					Snow at bottom : <span class="report_detail">{{report.snowAtBottom}}</span><br/>
					Snow at top : <span class="report_detail">{{report.snowAtTop}}</span><br/>
					Lifts : <span class="report_detail">{{report.numberOpenLifts}} open / {{hill.numberLifts}}</span><br/>
					Runs<br/>
					Black : <span class="report_detail">{{report.numberOpenBlackRuns}} open / {{hill.numberBlackRuns}}</span><br/>
					Red : <span class="report_detail">{{report.numberOpenRedRuns}} open / {{hill.numberRedRuns}}</span><br/>
					Blue : <span class="report_detail">{{report.numberOpenBlueRuns}} open / {{hill.numberBlueRuns}}</span><br/>
					Green : <span class="report_detail">{{report.numberOpenGreenRuns}} open / {{hill.numberGreenRuns}}</span><br/>
				</div>
				<div id="report_action">
					<a href="/sky/report?name={{hill.name}}">Add Report</a>
				</div>
			</div>
			<div id="feedback">
				<p id="average_grade"><strong>Average grade : </strong>{{hill.grade}}/4</p>
				<ul id="comments">
					<table border="1">
						<tr>
							<th align="center">Date</td>
							<th align="center">Overall Condition</td>
							<th align="center">Evaluation</td>
							<th align="center">Comment</td>
						</tr>
						{% for feed in feedbacks %}
						<tr>
							<td align="center">{{feed.date}}</td>
							<td align="center">{{feed.overallSnowCondition}}</td>
							<td align="center">{{feed.evaluation}}</td>
							<td align="center">{{feed.comment}}</td>
						</tr>						
						{% endfor %}
					</table>
				</ul>
				<form method="post" action="/sky/?name={{hill.name}}">
				{% csrf_token %}
					<table>
						<tr><td colspan="2"><strong>Feedback</strong></td></tr>
						<tr><td>Overall snow conditions (between 0 and 4):</td>
							<td><input type="text" name="overall" value=""/></td></tr>
						<tr><td>Evaluation (Rocky, Powder, Artificial Snow, Hard, Soup) :</td>
							<td><input type="text" name="evaluation" value=""/></td></tr>
						<tr><td>Comment :</td>
							<td><textarea rows="4" cols="30" name="comment"></textarea></td></tr>
						<tr><td colspan="2"><input type="submit" name="addComment" value="submit"/>
							</td></tr>
					</table>
				</form>
			</div>
	</body>
</html>